<template>
<div class="config-list">
  <div class="header item">
    <span class="one">序号</span>
    <span class="two">配置类型</span>
    <span class="three">备注</span>
    <span class="three">创建人</span>
    <span class="four">创建时间</span>
    <span class="four">更新时间</span>
    <span class="five">操作</span>
  </div>
  <template v-if="configList.length !== 0">
    <div class="item" v-for="(item,index) in configList" :key="index" @click="changeConfig(item)">
      <span class="one center">{{index+1}}</span>
      <span class="two center">{{item.type}}</span>
      <span class="three center">{{item.name}}</span>
      <span class="three center">{{item.realname}}</span>
      <span class="four center">{{timeFormat(item.createTime)}}</span>
      <span class="four center">{{timeFormat(item.updateTime)}}</span>
      <span class="five center">
        <el-button type="text" @click.stop="del(item.id)"><font color="red">删除</font></el-button>
        <el-button type="text" @click.stop="changeConfig(item)">使用</el-button>
        <el-button type="text" @click.stop="update(item)">重命名</el-button>
      </span>
    </div>
  </template>
  <div v-else style="padding:3rem 0;" class="center row-center">暂无配置</div>
</div>
</template>


<script>
function add0(m){return m<10?'0'+m:m }
export default {
  props:{
    configList:{
      type:Array,
      default:()=>{
        return []
      }
    },
  },
  methods:{
    timeFormat(shijianchuo){
      var time = new Date(parseInt(shijianchuo));
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    },
    del(id){
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id
          }
          this.$http.get('/config/del',params).then(res=>{
            this.$message({
              message:"删除成功",
              type:"success",
              showClose:true
            });
            const delFlag = true;
            this.$emit('getConfigList',delFlag);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    update(item){
      this.$prompt('请输入配置备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '请输入备注'
      }).then(({ value }) => {
        let config = JSON.stringify(item.config);
        let name = value;
        const type = item.type
        const id = item.id;
        let data = {
          config,name,type,id
        }
        this.$http.post('/config/update',data).then(res=>{
          this.$message({
            message:"更改成功",
            type:"success",
            showClose:true
          });
          this.$emit('getConfigList');
        })
      })
    },
    changeConfig(item){
      this.$emit("changeConfig",item)
    }
  }
}
</script>

<style lang="scss" scoped>
  .config-list{
    .header{
      background:#F7F7F9;
    }
    .item{
      display:flex;
      padding:.8rem .5rem;
      transition:all .3s;
      cursor: pointer;
      &:hover{
        background: #F7F7F9;
      }
      .one{
        flex:1;
      }
      .two{
        flex:2;
      }
      .three{
        flex:2;
      }
      .four{
        flex:3;
      }
      .five{
        flex:3;
      }
    }
  }
</style>